import React from 'react';
import { inject, observer} from 'mobx-react';
import {Spin,Table,Button,Modal,Radio } from 'antd';
import { WeaNewScroll,WeaTab,WeaTools,WeaTop,WeaCheckbox,WeaInputNumber,WeaSearchGroup,WeaFormItem,WeaBrowser,WeaDateGroup,WeaInput,WeaSelect,WeaRightMenu,WeaDialog} from 'ecCom';
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
@observer
export default class PlanProgramView extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        showSearchAd :false,
        isrefesh:false,
        topTab:[{
          title: "周报",
          viewcondition: "2"
        },
        {
          title: "月报",
          viewcondition: "1"
        }],
        selectedKey:1,
        columns:[
          {title: '字段',dataIndex: 'zd',width:'20%',
          render:(text, record, index) => <div title={text} className="noWrap">{text}</div>
          },
          {title: <div><WeaCheckbox value={0} display="switch" id='f3' style={{display: 'inline-block'}} />是否显示</div>,dataIndex: 'sfxs', width:'20%',
          render:(text, record, index) => <WeaCheckbox value={text} display="switch" id='f2' style={{display: 'inline-block'}} />
          },
          {title: <div><WeaCheckbox value={0} display="switch" id='f4' style={{display: 'inline-block'}} />是否必填</div>,dataIndex: 'sfbt',width:'20%',
          render:(text, record, index) =><WeaCheckbox value={text} display="switch" id='f1' style={{display: 'inline-block'}} />
          },
          {title: '排序',dataIndex: 'or_der',width:'20%',
          render:(text, record, index) => <WeaInputNumber  style={{display:"inline-block",width:80}} value = {text} />
          },
          {title: '宽度比例',dataIndex: 'kdbl',width:'10%',
          render:(text, record, index) =><WeaInputNumber  style={{display:"inline-block",width:80}} value = {text} />
          },
          {title: '自定义名称',dataIndex: 'zdymc',width:'10%',
          render:(text, record, index) =><WeaInput style={{ width: '96%' }} value={text}/>
          }
        ],
        datalist:[{"zd":"分类","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"标题","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"计划开始日期","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"计划结束日期","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"计划天数","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"计划目标","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"实际开始日期","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"实际结束日期","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"实际天数","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"完成比例","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"完成情况","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"自定义字段1","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"自定义字段2","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"自定义字段3","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"自定义字段4","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        {"zd":"自定义字段5","sfxs":"1","sfbt":"0","or_der":"1","kdbl":"1","zdymc":""},
        ],
        menu :[
        {
          key: '0',
          icon: <i className='icon-coms-search' />,
          content: '保存',
          onClick: key => {},
        },{
          key: '1',
          icon: <i className='icon-coms-search' />,
          content: '删除',
          onClick: key => {},
        },{
          key: '2',
          icon: <i className='icon-coms-search' />,
          content: '同步',
          onClick: key => {},
        }
        ],
        _height:this.getHeight(),
        heightInit:false,
        visiable:false,
        visiable1:false,
      }
    }
    componentWillMount() {//一些初始化请求
      
    }
    
    //重置查询条件
    resetSearchAd(){
      cancleSearchAd();
    }
    //搜索
    advanceSearch(){
      cancleSearchAd();
    }
    cancleSearchAd(){
      this.setState({
        showSearchAd:false
      });
    }
    getHeight(header){
      let h = 0;
      if(header){
          h = header.clientHeight || 0;
      }
      return window.innerHeight-h;
    }
    setShowTable(type){
      if(type==1){
        this.setState({visiable:!this.state.visiable,visiable1:false});
      }else{
        this.setState({visiable1:!this.state.visiable1,visiable:false});
      }
    }
    render() {
      const{showSearchAd,columns,menu,_height,datalist,topTab,selectedKey,visiable1,visiable} = this.state;
      let header = document.getElementsByClassName("e9theme-layout-header")[0];
      if(header && !heightInit){
          this.setState({_height:this.getHeight(header),heightInit:true});
      }
      return (
        <div className="wea-workrelate-plan-programview" style={{height:_height}}>
        <WeaNewScroll height={_height-80}>
        <WeaRightMenu datas={menu} showUrlItem={false} style={{height:'100%'}}>
            <WeaTop
              title="杨文元计划报告模块设置"
              icon={<i className='icon-coms-ModelingEngine-o' />}
              iconBgcolor='rgb(150, 53, 138)'
              buttons = {[(<Button type='primary' onClick={()=>this.advanceSearch()}>同步</Button>),
                          (<Button type='primary' onClick={()=>this.advanceSearch()}>删除</Button>),
                          (<Button type='primary' onClick={()=>this.advanceSearch()}>保存</Button>)
                        ]}
              showDropIcon={true}
              dropMenuDatas = {menu}
            />
              <WeaTab
                datas={topTab}
                showSearchAd={showSearchAd}
                keyParam="viewcondition" //主键
                selectedKey={selectedKey}
              />
              <WeaSearchGroup title='工作总结预览' showGroup={true}>
                   <div style={{borderBottom:"1px solid #a8eaa8",margin:"5px 20px"}}>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>分类</span>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>标题</span>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>实际开始时间</span>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>实际结束时间</span>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>实际天数</span>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>完成比例</span>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>完成情况</span>
                   </div>
                   <div style={{textAlign:"center",marginBottom:"10px"}}>
                       <Button type='primary' onClick={()=>this.setShowTable(1)}>自定义总结列字段</Button>
                   </div>
                   {visiable && <Table columns={columns} bordered={true} dataSource={datalist} className ="wea-develop-antd-table"
               pagination={false}/>}
              </WeaSearchGroup>
              <WeaSearchGroup title='工作计划预览' showGroup={true}>
                   <div style={{borderBottom:"1px solid rgb(126, 191, 222)",margin:"5px 20px"}}>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>分类</span>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>标题</span>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>计划开始时间</span>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>计划结束时间</span>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>计划天数</span>
                       <span style={{padding:"0 10px",width:"10%",display:"inline-block"}}>计划目标</span>
                   </div>
                   <div style={{textAlign:"center",marginBottom:"10px"}}>
                       <Button type='ghost' onClick={()=>this.setShowTable(2)}>自定义计划列字段</Button>
                       <Button type='ghost' onClick={()=>{}}>增加默认计划内容</Button>
                   </div>
                   {visiable1 &&  <Table columns={columns} bordered={true} dataSource={datalist} className ="wea-develop-antd-table"
               pagination={false}/>}
              </WeaSearchGroup>
              <WeaSearchGroup title='报告审批' showGroup={true}>
                  <WeaFormItem
                    label="报告审批人"
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 20 }}>
                      <WeaBrowser  type={1} inputStyle={{width:250}} onChange={(ids, names, datas) => {}}/>
                  </WeaFormItem>
              </WeaSearchGroup>
          </WeaRightMenu>
          </WeaNewScroll>
        </div>
    )
  }
};